<%--
  Created by IntelliJ IDEA.
  User: wlc
  Date: 2018/5/7
  Time: 14:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ include file="PageFrame.jsp"%>

<title>消息中心</title>
<!-- Page Content -->
<div class="container" id="message-center">
    <div class="message-manager-sidebar">
        <div class="message-manager-sidebar-title">消息中心</div>
        <div class="message-manager-sidebar-list">
            <ul role="tablist">
                <li role="presentation" class="active">
                    <a href="#all-message" aria-controls="all-message" role="tab" data-toggle="tab">全部消息</a>
                </li>
                <li role="presentation">
                    <a href="#unread-message" aria-controls="unread-message" role="tab" data-toggle="tab">未读消息</a>
                </li>
                <li role="presentation">
                    <a href="#read-message" aria-controls="read-message" role="tab" data-toggle="tab">已读消息</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="message-manager-content tab-content">
        <div role="tabpanel" class="tab-pane active" id="all-message">
            <div class="message-list">
                <ul role="tablist">
                    <li role="presentation" class="active">
                        <a href="#allType-message" aria-controls="allType-message" role="tab" data-toggle="tab">全部类型消息</a>
                    </li>
                    <li role="presentation">
                        <a href="#authority-message" aria-controls="authority-message" role="tab" data-toggle="tab">权限消息</a>
                    </li>
                    <li role="presentation">
                        <a href="#feedback-message" aria-controls="feedback-message" role="tab" data-toggle="tab">反馈消息</a>
                    </li>
                </ul>
            </div>
            <div class="message-content tab-content">
                <div role="tabpanel" class="tab-pane active" id="allType-message">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="allType-message-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="allType-message-tbody">
                            <c:forEach items="${messages}" var="message" varStatus="i">
                                <tr id="${message.getId()}">
                                    <td width="10"><input type="checkbox" name="allType-message-selectAll"></td>
                                    <td class="title-col"><span class="message-show"><c:out value="${message.getTitle()}"></c:out></span></td>
                                    <td class="sender-col"><c:out value="${message.getSenderName()}"></c:out></td>
                                    <td class="date-col"><c:out value="${message.getDate()}"></c:out></td>
                                    <td class="type-col"><c:out value="${message.getType()}"></c:out></td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('allType-message-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('allType-message-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="authority-message">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="authority-message-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="authority-message-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('authority-message-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('authority-message-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="feedback-message">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="feedback-message-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="feedback-message-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('feedback-message-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('feedback-message-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="unread-message">
            <div class="message-list">
                <ul role="tablist">
                    <li role="presentation" class="active">
                        <a href="#allType-unreadMessage" aria-controls="allType-unreadMessage" role="tab" data-toggle="tab">全部类型消息</a>
                    </li>
                    <li role="presentation">
                        <a href="#authority-unreadMessage" aria-controls="authority-unreadMessage" role="tab" data-toggle="tab">权限消息</a>
                    </li>
                    <li role="presentation">
                        <a href="#feedback-unreadMessage" aria-controls="feedback-unreadMessage" role="tab" data-toggle="tab">反馈消息</a>
                    </li>
                </ul>
            </div>
            <div class="message-content tab-content">
                <div role="tabpanel" class="tab-pane active" id="allType-unreadMessage">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="allType-unreadMessage-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="allType-unreadMessage-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('allType-unreadMessage-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('allType-unreadMessage-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="authority-unreadMessage">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="authority-unreadMessage-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="authority-unreadMessage-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('authority-unreadMessage-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('authority-unreadMessage-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="feedback-unreadMessage">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="feedback-unreadMessage-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="feedback-unreadMessage-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('feedback-unreadMessage-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('feedback-unreadMessage-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="read-message">
            <div class="message-list">
                <ul role="tablist">
                    <li role="presentation" class="active">
                        <a href="#allType-readMessage" aria-controls="allType-readMessage" role="tab" data-toggle="tab">全部类型消息</a>
                    </li>
                    <li role="presentation">
                        <a href="#authority-readMessage" aria-controls="authority-readMessage" role="tab" data-toggle="tab">权限消息</a>
                    </li>
                    <li role="presentation">
                        <a href="#feedback-readMessage" aria-controls="feedback-readMessage" role="tab" data-toggle="tab">反馈消息</a>
                    </li>
                </ul>
            </div>
            <div class="message-content tab-content">
                <div role="tabpanel" class="tab-pane active" id="allType-readMessage">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="allType-readMessage-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="allType-readMessage-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('allType-readMessage-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('allType-readMessage-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="authority-readMessage">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="authority-readMessage-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="authority-readMessage-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('authority-readMessage-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('authority-readMessage-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="feedback-readMessage">
                    <div class="message-content-table">
                        <table class="table table-hover body">
                            <thead>
                            <tr>
                                <th width="10">
                                    <input id="feedback-readMessage-selectAll" type="checkbox">
                                </th>
                                <th class="title-col">标题</th>
                                <th class="sender-col">发送人</th>
                                <th class="date-col">日期</th>
                                <th class="type-col">类型</th>
                            </tr>
                            </thead>
                            <tbody id="feedback-readMessage-tbody">
                            </tbody>
                        </table>
                        <table class="table table-fixed foot">
                            <tfoot>
                            <tr>
                                <td>
                                    <div>
                                        <a class="btn btn-default" onclick="selectedMessageDel('feedback-readMessage-tbody')"><span>删除</span></a>
                                        <a class="btn btn-default" onclick="selectedMessageReaded('feedback-readMessage-tbody')"><span>标记为已读</span></a>
                                    </div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Page Content -->
<!-- Modal -->
<div class="modal fade" id="messageShow" tabindex="-1" role="dialog" aria-labelledby="messageShowLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="messageShowLabel">消息</h4>
            </div>
            <div class="modal-body" >
                <table style="background-color: #F5F5F5;border-bottom: 1px solid #C8CFDA;">
                    <tbody style="padding: 10px;display: block;">
                    <tr id="message-title"><td></td></tr>
                    <tr id="message-sender"><td></td></tr>
                    <tr id="message-date"><td></td></tr>
                    </tbody>
                </table>
                <table style="background-color: #F3EBDF;margin-top: 30px;margin-bottom: 30px;">
                    <tbody>
                    <tr id="message-content"><td></td></tr>
                    <tr id="message-image"></tr>
                    </tbody>
                </table>
                <input type="hidden" value="" id="messageShow-id">
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>
<!-- /Modal -->
<!--hidden Content-->
<div id="message-mark-isread">
    <c:forEach items="${messages}" var="message" varStatus="i">
        <input type="hidden" name="${message.getId()}" value="${message.getReadStatus()}">
    </c:forEach>
</div>
<!--/hidden Content-->
<!-- js-->
<script src="../js/message-center.js" type="text/javascript"></script>
<!-- /js-->